Step 3 - Use keyboard keys to navigate in the air conditioning settings
In this step you create keyboard navigation for the Driver and Passenger application screens and use keys to set the values of the sliders which control the air conditioning temperature.
Create keyboard navigation between the Driver and Passenger application screens
In this section you create keyboard navigation to switch between the Driver and Passenger application screens.
To create keyboard navigation between the Driver and Passenger application screens:
In the Project > RootPage > Home > AirCondition > Toggle Button Group 2D select the DriverButton node, in the Properties add the Right Navigation Node property, and set it to #PassengerButton. You set focus from the DriverButton node to the PassengerButton node when the user presses the → (Right Arrow) key on the keyboard.
In the Project > RootPage > Home > AirCondition > Toggle Button Group 2D select the PassengerButton node, in the Properties add the Left Navigation Node property and set it to #DriverButton. You set focus from the PassengerButton node to the DriverButton node when the user presses the ← (Left Arrow) key on the keyboard.
In the Project select the DriverButton node, in the Node Components add an On Property Change trigger, and in the Trigger Settings set the Property Type to Node.Focused. You set the On Property Change trigger to keep track of when the value of the Focused property of the DriverButton node changes.
Add to the On Property Change trigger you created in the previous step an Execute Script action and use the ButtonState.js script. When the DriverButton toggle button receives focus, the On Property Change trigger sets off the Execute Script action which toggles on that toggle button.
Right-click the On Property Change trigger you created, select Copy, and paste that trigger to the PassengerButton node.
In the Preview in the AirCondition screen use the → (Right Arrow) and ← (Left Arrow) keys to navigate between the Driver and Passenger screens.
Set keyboard keys to move a slider
In this section you enable the user to use keyboard keys to change the value of the slider which controls the air conditioning temperature.
To set keyboard keys to move a slider:
In the Project > RootPage > Home > AirCondition > Toggle Button Group 2D select the DriverButton node, in the Properties add the Up Navigation Node property, and set it to #DriverSlider. You use this trigger to set focus to the Slider 2D node in the Driver node. When the Slider 2D node has focus, you can use the ← (Left Arrow) and → (Right Arrow) keyboard keys to move the slider knob.
Repeat the previous step for the PassengerButton node but set the Up Navigation Node property to #PassengerSlider.
In the Project > RootPage > Home > AirCondition > Driver select the Slider 2D node, in the Properties add the Down Navigation Node property, and set it to #DriverButton. You set focus from the Slider 2D node back to the Driver node when the user presses the ↓ (Down Arrow) key on the keyboard.
Repeat the previous step for the RootPage > Home > AirCondition > Passenger > Slider 2D node but set the Down Navigation Node property to #PassengerButton.
Show when a slider is focused
In this section you create visualization which shows the user when the sliders are focused.
To show when a slider is focused:
In the Prefabs select the Slider 2D prefab and in the State Tools click Create State Manager. Kanzi Studio creates a state manager and assigns it to the Slider 2D prefab. When you edit the nodes in a prefab or any of its instances in a project, you change those nodes in all instances of that prefab. The Slider 2D nodes in the Page nodes Driver and Passenger now both use the state manager you created.
In the State Tools click Create State twice to create two states, double-click the name of each state, and rename the states to NotFocused and Focused. The NotFocused state defines the state of your application when one of the sliders is not focused and the Focused state when one of the sliders is focused.
In the Prefabs > Slider 2D > Trajectory Layout 2D select the Knob node and in the Properties set the Image property to Knob_Active.png. You use the image to indicate when a slider is focused.
In the State Tools click below the Focused state to save the current image to that state. You display a different image of the slider knob when the slider is focused.
In the Prefabs > Slider 2D > Trajectory Layout 2D select the Knob node, in the Properties set the Image property to Knob.png, and in the State Tools click below the NotFocused state to save the current image to that state.
In the State Tools click the <No Controller Property> dropdown menu and select the Node > Focused property. When you set the Focused property as the controller property for the state manager that controls the states of the sliders, the state manager transitions to a state based on the value of that property. When a slider is in focus, the appearance of the slider knob changes.
In the State Tools under the Focused state set the value of the Focused property to True.
In the State Tools click Any -> Any to open the State Transition Editor and in the State Transition Editor set the Duration to 0. You set the state transition for the slider knob to happen immediately when the user presses the ↑ (Up Arrow) key on the keyboard.
In the State Tools click Edit State Manager to deactivate the State Tools.
When the Page node Driver is active, use the → (Right Arrow) and ← (Left Arrow) keys to navigate between the Driver and Passenger screens. To adjust the slider values, press the ↑ (Up Arrow) key to set focus to the Slider 2D node, and use the → (Right Arrow) and ← (Left Arrow) keys to set the slider value. Press the ↓ (Down Arrow) key to set the focus back to the Toggle Button 2D nodes DriverButton or PassengerButton.
below the Focused state to save the current image to that state.
